<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="primus" tagdir="/WEB-INF/tags" %>
<%@ taglib prefix="fn" tagdir="/WEB-INF/tags/form" %>

<primus:page title="商品信息">
    <jsp:attribute name="css">
        <style type="text/css">
            #table .operate {
                min-width: 80px;
            }
        </style>
    </jsp:attribute>
    <jsp:attribute name="script">
        <script type="application/javascript">
            $(function () {
                $("#table").DataTable({
                    "lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "所有"]],
                    "columnDefs": [{"targets": [7], "orderable": false}],
                    "searching": false,
                    "order": [[0, "asc"]]
                });
            });
            $("body").on("click", ".geo-line", function () {
                var id = $(this).data("id");
            })
        </script>
    </jsp:attribute>
    <jsp:body>
        <div class="breadcrumbs ace-save-state" id="breadcrumbs">
            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a href="welcome.do">
                        首页
                    </a>
                </li>
                <li>
                    <a href="salesReturnListController/applySalesReturn">
                        申请退货
                    </a>
                </li>
                <li class="active">
                    商品信息
                </li>
            </ul>
        </div>

        <div class="page-content">

            <div class="row">
                <div class="col-xs-12">
                    <!-- PAGE CONTENT BEGINS -->
                    <div class="row">
                        <div class="col-xs-12">
                            <h3 class="header smaller lighter blue">
                                闪送订单监控
                            </h3>


                            处理类型

                            <select>
                                <option>--请选择--</option>
                                <option>未处理</option>
                                <option>处理中</option>
                                <option>处理完成</option>
                            </select>
                            <span>
                                启动刷新时间：
                            </span>
                            <span  id="a" style="font-size: 15px;">
                            </span>

                            <script>
                                setInterval("a.innerHTML=new Date().toLocaleString()",500);
                            </script>

                            <span>
                            <button id="startORpause" value="0" onclick="startt()" class="btn-sm btn-warning"></button>
                            </span>



                            <%--居中搜索订单编号样式--%>
                            <style type="text/css">
                                input::-webkit-input-placeholder{text-align: center;}
                            </style>

                            <span>
                                <input type="text" placeholder="搜索订单编号">
                            </span>

                            <br>
                            <br>



                        <%--订单列表头部--%>
                            <div class="col-xs-12">
                                <table id="orderList-table" class="table  table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <%--这里是商品信息第一排文字 商品菜单--%>
                                        <%--多选框--%>
                                        <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">操作</font></font></th>
                                        <th><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">订单编号</font></font></th>
                                        <th class="hidden-480"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">订单来源</font></font></th>
                                        <th class="hidden-480"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">订单状态</font></font></th>
                                        <th class="hidden-480"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">配送单号</font></font></th>
                                        <th class="hidden-480"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">门店名称</font></font></th>
                                        <th class="hidden-480"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">下单时间</font></font></th>
                                        <th class="hidden-480"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">派单时间</font></font></th>
                                        <th class="hidden-480"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">要求送达时间</font></font></th>
                                        <th class="hidden-480"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">出库超时时间</font></font></th>
                                        <th class="hidden-480"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">客户备注</font></font></th>
                                    </tr>
                                    </thead>


                                <%--这里面的是数据--%>
                                    <tbody>
                                    <tr class="">
                                        <td><a href="JavaScript:void (0)" onclick="return confirm('确定处理吗？')"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><button class="btn btn-minier btn-danger">处理</button></font></font></a></td>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">98772618890</font></font></td>
                                        <td class="hidden-480"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">APP</font></font></td>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">已分单</font></font></td>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">18772618890</font></font></td>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">成都市高新区环球中心店</font></font></td>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">11/23/2017, 1:50:38 PM</font></font></td>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">11/23/2017, 1:50:38 PM</font></font></td>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">2017-11-11 12:19:00</font></font></td>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">00小时00分08秒</font></font></td>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">请在1点之前送</font></font></td>
                                    </tr>





                                    <tr class="">
                                        <td><a href="JavaScript:void (0)" onclick="return confirm('您确定要处理吗？')"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><button class="btn btn-minier btn-danger">处理</button></font></font></a></td>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">98772618890</font></font></td>
                                        <td class="hidden-480"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">APP</font></font></td>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">已分单</font></font></td>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">18772618890</font></font></td>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">成都市高新区环球中心店</font></font></td>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">11/23/2017, 1:50:38 PM</font></font></td>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">11/23/2017, 1:50:38 PM</font></font></td>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">2017-11-11 12:19:00</font></font></td>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">00小时00分08秒</font></font></td>
                                        <td><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">请在1点之前送</font></font></td>
                                    </tr>

                                    </tbody>

                                </table>
                            </div>
                                <%--订单列表尾部--%>



                            <h3 class="header smaller lighter blue">
                                闪送订单监控处理
                            </h3>


                            <div class="row">
                                    <label class="col-sm-4 control-label no-padding-right">超时原因:</label>
                                    <select class="form-control" id="form-field-select-1">
                                        <option value=""></option>
                                        <option value="AL">门店停电</option>
                                        <option value="WI">堵车</option>
                                        <option value="WY">其他原因</option>
                                    </select>

                            </div>




                            <div class="row">
                                <label class="col-sm-4 control-label no-padding-right">处理备注:</label>
                                     <textarea id="form-field-11" class="autosize-transition form-control" style="overflow: hidden; word-wrap: break-word; resize: none; height: 100px;"></textarea>
                            </div>



                            <br>
                            <table width="313" border="0" align="center" cellpadding="0" cellspacing="0">
                              <tr>
                                <td width="145">
                                    <button class="btn btn-sm btn-primary">返回</button>
                                </td>
                                <td width="168">
                                    <button class="btn btn-sm btn-success">确认</button>
                                </td>
                              </tr>
                            </table>
                            <br>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
        </div>

        <script type="text/javascript">

        </script>

        <script>

            sessionStorage.setItem('start', JSON.stringify('启动刷新')); // 存入一个启动刷新
            sessionStorage.setItem('pause', JSON.stringify('暂停')); // 存入一个暂停

            var start = sessionStorage.getItem('start'); // => 返回testKey对应的值
            var pause = sessionStorage.getItem('pause'); // => 返回testKey对应的值

            $("#startORpause").text(start.replace("\"", "").replace("\"", ""));

            var  intervalId;
            function startt() {
                var startORpauseval = $("#startORpause").val();
                if (startORpauseval == 0) {
                    $("#startORpause").text(pause.replace("\"", "").replace("\"", ""));
                    $("#startORpause").val(1);

                    $("#startORpause").attr("class","btn-sm btn-danger");

                    if($("#startORpause").val()==1){

                        intervalId = function() {
                            var dttable = $("#orderList-table").dataTable();
                            dttable.fnClearTable(); //清空一下table
                            dttable.fnDestroy(); //还原初始化了的datatable
                            tableSinComInf();
                        };
                        intervalId = setInterval(intervalId,10000);
                    }
                } else {
                    $("#startORpause").text(start.replace("\"", "").replace("\"", ""));
                    $("#startORpause").val(0);
                    $("#startORpause").attr("class","btn-sm btn-warning");
                    window.clearTimeout(intervalId)
                }
            }

            var row,    // 详情数据
                index;  // 行索引



            $(function () {
                var startTimeoutes;
                startTimeoutes = startt;
                startTimeoutes = setTimeout(startTimeoutes,1000);



                GetRequest();

                //关闭datatable弹窗提示
                $.fn.dataTable.ext.errMode = 'none'; //不显示任何错误信息

                $("#showTable").hide();     //选择下拉框

                $(".tabe2").hide();         //隐藏拆单列表,仓库列表

                tableSinComInf();           //初始化派单信息列表

                $('#table_sin_com_inf tbody').on('click', 'tr', function () {
                    index = this._DT_RowIndex;
                    if ($(this).hasClass('selected')) {
                        $(this).css({'background-color': '#f9f9f9'})
                        $(this).removeClass('selected');
                    } else {
                        $("#table_sin_com_inf").dataTable().$('tr.selected').css({'background-color': '#f9f9f9'})
                        $("#table_sin_com_inf").dataTable().$('tr.selected').removeClass('selected');
                        $(this).addClass('selected');
                        $(this).css({'background-color': '#00c0ef'})
                    }
                });



            });

            // 关闭按钮(跳转派单列表页面)
            $("#closeButton").on("click", function () {
                window.location.href = "/salesReturnListController.do";
            });

            // 添加地址按钮(展示拆单列表,仓库列表)
            $("#showAddresButton").on("click", function () {
                $("#showTable").show();
            });

            // 拆单按钮(展示拆单列表)
            $("#separateBillButton").on("click", function () {
                $(".tabe1").show();
            });

            // 更改按钮(仓库列表)
            function alterButton() {
                $(".tabe3").show();
            }

            // 获取session 存储的值
            function GetRequest() {
                var vc = sessionStorage.getItem('sendOperation'); // => 返回testKey对应的值
                row = JSON.parse(vc)
                console.log(vc);
                con_inf_value(row.consignee);
            }

            // 获取商品派单信息列表
            function tableSinComInf() {
                var obj = tableSinComInfCov();
                var table = $("#table_sin_com_inf").dataTable({
                    searching: false,
                    ordering: false,
                    paging: false, // 禁止分页
                    bDestory: true,
                    bRetrieve: true,
                    data: obj,
                });
            }

            // 商品派单信息 封装
            function tableSinComInfCov() {
                var arr = [];
                var ty = [];

                arr.push(row.code);
                arr.push(row.orderSource);
                arr.push(row.posNo);
                arr.push(row.amount + '&nbsp;&nbsp;&nbsp;' + '<button class=\'btn btn-xs btn-pink\' onclick=\'addLine()\'>十</button>');
                arr.push(row.posNo);
                arr.push("<button class=\"btn btn-xs btn-pink\" onclick='alterButton()'>更改</button>");
                ty.push(arr);
                return ty;
            }

            var ji = 0;
            // 商品派单信息列表添加行
            function addLine() {
                var dt = $("#table_sin_com_inf").dataTable();
                var num = dt.api().rows().count();    // 行号
                ji++;
                var arr = [];
                arr.push(ji);
                arr.push(row.orderSource);
                arr.push(row.posNo);
                arr.push(row.amount + '&nbsp;&nbsp;&nbsp;' + '<button class=\'btn btn-xs btn-pink\' onclick=\'addLine()\'>十</button>' + '&nbsp;&nbsp;&nbsp;' + '<button class=\'btn btn-xs btn-pink\' onclick=\'cutLine(' + num + ')\'>一</button>');
                arr.push(row.posNo);
                arr.push("<button class=\"btn btn-xs btn-pink\" onclick='alterButton()'>更改</button>");
                dt.api().row.add(arr).draw();

            }

            // 删除行
            function cutLine(num) {
                var dt = $("#table_sin_com_inf").dataTable().api();
                if (num != 0) {
                    if (index == num) {
                        dt.row('.selected').remove().draw(false);
                    } else {
                        layer.msg("选中行与删除行不一致");
                    }
                }
            }

            // 收货人信息赋值
            function con_inf_value(consignee) {
                console.log(consignee)
                if (consignee != null) {
                    $("#seller").val(consignee.modifyRemark);
                    $(".con_inf_name").val(consignee.consigneeName);
//                    $(".con_inf_postcode").val(consignee.consigneeMobile); //暂缺 邮编
//                    $(".con_inf_email").val(consignee.consigneeMobile);    //暂缺 邮箱
                    $(".con_inf_tel").val(consignee.consigneeMobile);
                    $(".con_inf_address").html(consignee.address);
                }
            }

        </script>
    </jsp:body>
</primus:page>